<!-- src/Child.vue -->
<template>
  <h3 class="box">child - {{  props.str  }} - {{  myStr  }}</h3>
</template>

<script setup>
import { computed } from 'vue'
// 定义子组件接收父组件的数据
const props = defineProps({
  str: String
})

const myStr = computed(() => props.str)
</script>

<style scoped>
.box {
  font-size: 50px;
  color: #00f;
}
</style>